<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav-bar" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
			<view class="nav-back" @click="goBack">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<text class="nav-title">帮助中心</text>
		</view>

		<!-- 主内容区 -->
		<scroll-view class="main-content" scroll-y>
			<!-- 自助服务网格 -->
			<view class="service-section">
				<view class="section-title">自助服务</view>
				<view class="service-grid">
					<view v-for="(item, index) in services" :key="index" class="service-item" :class="item.bgClass"
						@click="handleService(item.action)">
						<uni-icons :type="item.icon" size="50" color="#333"></uni-icons>
						<text>{{ item.title }}</text>
					</view>
				</view>
			</view>

			<!-- 智能助手 -->
			<view class="smart-assistant">
				<view class="assistant-header">
					<uni-icons type="service" size="32" color="#09BE4F"></uni-icons>
					<text>智能助手小摆</text>
				</view>
				<view class="assistant-content">
					<text>24小时在线，随时为您解答问题</text>
					<button class="chat-btn" @click="startChat">立即咨询</button>
				</view>
			</view>

			<!-- 常见问题 -->
			<view class="faq-section">
				<view class="section-title">猜你想问</view>
				<view class="faq-list">
					<view v-for="(item, index) in faqs" :key="index" class="faq-item" :class="{ active: item.expanded }"
						@click="toggleFaq(index)">
						<view class="question">
							<text class="q-index">Q{{ index + 1 }}</text>
							<text class="q-text">{{ item.question }}</text>
							<uni-icons :type="item.expanded ? 'arrowup' : 'arrowdown'" size="20" color="#999">
							</uni-icons>
						</view>
						<view v-if="item.expanded" class="answer">
							<text class="a-mark">答：</text>
							<text>{{ item.answer }}</text>
							<text v-if="item.link" class="detail-link" @click="navigateTo(item.link)">查看详情</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 联系客服 -->
			<view class="contact-section">
				<view class="contact-card" @click="makeCall">
					<uni-icons type="phone-filled" size="48" color="#09BE4F"></uni-icons>
					<view class="contact-info">
						<text class="title">电话客服</text>
						<text class="number">400-123-4567</text>
						<text class="time">服务时间：8:00-22:00</text>
					</view>
				</view>
				<view class="contact-card" @click="openChatWindow">
					<uni-icons type="chat-filled" size="48" color="#09BE4F"></uni-icons>
					<view class="contact-info">
						<text class="title">在线客服</text>
						<text class="number">立即沟通</text>
						<text class="time">当前排队：约3人</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				services: [{
						icon: 'chat',
						title: '历史留言',
						bgClass: 'bg-mint',
						action: 'message'
					},
					{
						icon: 'search',
						title: '账号找回',
						bgClass: 'bg-sky',
						action: 'accountRecovery'
					},
					{
						icon: 'flag',
						title: '违规申诉',
						bgClass: 'bg-rose',
						action: 'appeal'
					},
					{
						icon: 'phone',
						title: '手机换绑',
						bgClass: 'bg-lavender',
						action: 'rebindPhone'
					},
					{
						icon: 'help',
						title: '常见问题',
						bgClass: 'bg-cream',
						action: 'faq'
					},
					{
						icon: 'vip',
						title: '会员续费',
						bgClass: 'bg-aqua',
						action: 'vip'
					}
				],
				faqs: [{
						question: "如何查看历史沟通记录？",
						answer: "在消息中心可查看近3个月的客服沟通记录",
						expanded: false,
						link: '/pages/message/history'
					},
					{
						question: "账号被盗如何找回？",
						answer: "通过手机验证或人工审核流程进行账号找回",
						expanded: false
					},
					{
						question: "违规申诉需要哪些材料？",
						answer: "请准备订单截图、问题描述及相关凭证",
						expanded: false
					}
				],
				safeAreaInsets: {
					top: 0,
					bottom: 0
				}
			};
		},
		onLoad() {
			this.getSafeAreaInsets();
		},
		methods: {
			//返回上一个页面
			goBack() {
				uni.navigateBack();
			},
			toggleFaq(index) {
				this.faqs[index].expanded = !this.faqs[index].expanded;
			},
			startChat() {
				uni.navigateTo({
					url: '/pages/service/chat'
				});
			},
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: '4001234567'
				});
			},
			openChatWindow() {
				this.startChat();
			},
			handleService(action) {
				const actionMap = {
					message: () => uni.navigateTo({
						url: '/pages/message/history'
					}),
					accountRecovery: () => uni.navigateTo({
						url: '/pages/account/recovery'
					}),
					appeal: () => uni.navigateTo({
						url: '/pages/appeal/create'
					}),
					rebindPhone: () => uni.navigateTo({
						url: '/pages/settings/phone'
					}),
					faq: () => this.scrollToFAQ(),
					vip: () => uni.navigateTo({
						url: '/pages/vip/renew'
					})
				};
				actionMap[action]?.();
			},
			scrollToFAQ() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.faq-section').boundingClientRect();
				query.exec((res) => {
					uni.pageScrollTo({
						scrollTop: res[0].top - 50,
						duration: 300
					});
				});
			},
			getSafeAreaInsets() {
				uni.getSystemInfo({
					success: (res) => {
						this.safeAreaInsets = {
							top: res.safeArea ? res.safeArea.top : res.statusBarHeight,
							bottom: res.safeArea ? res.safeArea.bottom : 0
						};
					},
					fail: (err) => {
						console.error('获取系统信息失败:', err);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background: #f5f7fa;
		min-height: 100vh;
	}

	/* 自定义导航栏 */
	.custom-nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		background-color: white;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: sticky;
		height: 90rpx;
		top: 0;
		z-index: 10;

		.nav-back {
			display: flex;
			align-items: center;
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			flex: 1;
			text-align: center;
		}
	}

	/* 自助服务 */
	.service-section {
		margin: 30rpx;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

		.section-title {
			padding: 32rpx;
			font-size: 34rpx;
			font-weight: 500;
			border-bottom: 1rpx solid #eee;
		}

		.service-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rpx;
			background: #f5f5f5;

			.service-item {
				padding: 48rpx 24rpx;
				background: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: all 0.2s;

				&:active {
					background: #f8f8f8;
					transform: scale(0.98);
				}

				uni-icons {
					margin-bottom: 24rpx;
				}

				text {
					font-size: 28rpx;
					color: #333;
					text-align: center;
					line-height: 1.4;
				}

				/* 背景色类 */
				&.bg-mint {
					background: #E8F5E9;
				}

				&.bg-sky {
					background: #E3F2FD;
				}

				&.bg-rose {
					background: #FFEBEE;
				}

				&.bg-lavender {
					background: #F3E5F5;
				}

				&.bg-cream {
					background: #FFF8E1;
				}

				&.bg-aqua {
					background: #E0F2F1;
				}
			}
		}
	}

	/* 智能助手 */
	.smart-assistant {
		margin: 30rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

		.assistant-header {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			uni-icons {
				margin-right: 16rpx;
			}

			text {
				font-size: 32rpx;
				color: #333;
			}
		}

		.assistant-content {
			text-align: center;
			padding: 24rpx 0;

			text {
				color: #666;
				font-size: 28rpx;
			}

			.chat-btn {
				width: 60%;
				margin-top: 32rpx;
				background: #09BE4F;
				color: #fff;
				border-radius: 50rpx;
				font-size: 32rpx;
			}
		}
	}

	/* 常见问题 */
	.faq-section {
		margin: 30rpx;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

		.section-title {
			padding: 32rpx;
			font-size: 34rpx;
			font-weight: 500;
			border-bottom: 1rpx solid #eee;
		}

		.faq-item {
			padding: 0 32rpx;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.question {
				display: flex;
				align-items: center;
				padding: 32rpx 0;
				position: relative;

				.q-index {
					width: 48rpx;
					height: 48rpx;
					background: #09BE4F;
					color: #fff;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 24rpx;
				}

				.q-text {
					flex: 1;
					font-size: 30rpx;
					color: #333;
				}

				uni-icons {
					margin-left: 16rpx;
				}
			}

			.answer {
				padding: 0 32rpx 32rpx 72rpx;
				color: #666;
				line-height: 1.6;
				position: relative;

				.a-mark {
					color: #09BE4F;
					font-weight: bold;
					margin-right: 8rpx;
				}

				.detail-link {
					display: block;
					color: #09BE4F;
					margin-top: 24rpx;
				}
			}

			&.active {
				background: #f8fafb;
			}
		}
	}

	/* 联系客服 */
	.contact-section {
		margin: 30rpx;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

		.contact-card {
			display: flex;
			align-items: center;
			padding: 32rpx;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			uni-icons {
				margin-right: 32rpx;
			}

			.contact-info {
				flex: 1;

				.title {
					font-size: 32rpx;
					color: #333;
				}

				.number {
					color: #09BE4F;
					font-size: 34rpx;
					margin: 16rpx 0;
				}

				.time {
					color: #999;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
